<template>
    <div
        class="jobcommon EditResumeInfo"
        v-if="JSON.stringify(resume_info) != '{}'"
    >
        <div class="smalbox">
            <div data-v-61dd7a3d="" class="backnavjob">
                <h1 data-v-61dd7a3d="" @click="closejibenxinxi('close')">
                    <img
                        data-v-61dd7a3d=""
                        src="../../assets//newimg/index/icon_right_h.png"
                        alt=""
                    />
                </h1>
                <h2 data-v-61dd7a3d="">
                    <span data-v-61dd7a3d="">简历-基本信息</span>
                </h2>
                <h3 data-v-61dd7a3d=""></h3>
            </div>

            <div
                class="list_height plist-txt qs-relative"
                @click="changeImgClick()"
            >
                <div class="pic"></div>
                <div class="tit font14">简历照片</div>
                <div class="describe font13">
                    <div class="avatar">
                        <img id="avatars" :src="resume_info.photo_img" />
                    </div>
                </div>
                <input
                    type="file"
                    accept="image/*"
                    name="head_pic"
                    ref="filElem"
                    @change="handleFiles($event)"
                    style="display: none"
                />
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    姓名<span class="font_red_light">*</span>
                </div>
                <div class="describe font13">
                    <input
                        type="text"
                        id="fullname"
                        placeholder="请输入姓名"
                        value=""
                        v-model="resume_info.fullname"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    性别<span class="font_red_light">*</span>
                </div>
                <div id="sex" class="describe font13">
                    <div class="radio-group x2">
                        <div class="radio-cell">
                            <label for="radio4">男</label>
                            <input
                                name="sex"
                                type="radio"
                                value="1"
                                title="男"
                                checked="checked"
                                v-model="resume_info.sex"
                            />
                        </div>
                        <div class="radio-cell">
                            <label for="radio5">女</label>
                            <input
                                name="sex"
                                type="radio"
                                value="2"
                                title="女"
                                v-model="resume_info.sex"
                            />
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="imSelectParent">
                <div
                    class="list_height plist-txt imitateSelect"
                    @click="birthdayPropsKey = !birthdayPropsKey"
                >
                    <div class="pic"></div>
                    <div class="tit font14">
                        出生年份<span class="font_red_light">*</span>
                    </div>
                    <div class="describe font13">
                        <span class="selectTxt">{{
                            resume_info.birthdate
                        }}</span>
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <van-action-sheet v-model="birthdayPropsKey">
                    <div class="birthdayProps">
                        <ul>
                            <li
                                v-for="(item, index) in guidance.birthdate_arr"
                                :key="index"
                                @click="birthdayPropsFn(item)"
                            >
                                {{ item }}
                            </li>
                        </ul>
                    </div>
                </van-action-sheet>
            </div>
            <div class="imSelectParent" @click="zuigaoxliKey = !zuigaoxliKey">
                <div class="list_height plist-txt imitateSelect">
                    <div class="pic"></div>
                    <div class="tit font14">
                        最高学历<span class="font_red_light">*</span>
                    </div>
                    <div class="describe font13">
                        <span class="selectTxt">{{
                            resume_info.education_cn
                        }}</span>
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <van-action-sheet
                    v-model="zuigaoxliKey"
                    :actions="zuigaoxliactions"
                    @select="zuigaoxliSelect"
                    :duration="0.2"
                />
            </div>
            <div
                class="list_height plist-txt qs-relative js-actionParent"
                @click="zhuanyeKey = !zhuanyeKey"
            >
                <div class="abAct js-showActionSheet"></div>
                <div class="pic"></div>
                <div class="tit font14">专业</div>
                <div class="describe font13 qs-temp-level-major">
                    <span class="qs-temp-txt-major" data-otxt="请选择">{{
                        resume_info.major_cn
                    }}</span>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <van-popup v-model="zhuanyeKey" round position="bottom">
                <van-cascader
                    class="Cascader"
                    title="请选择所在地区"
                    :options="zhuanyeOptions"
                    @close="zhuanyeKey = false"
                    @finish="zhuanyeonFinish"
                />
            </van-popup>
            <div class="imSelectParent">
                <div
                    class="list_height plist-txt imitateSelect"
                    @click="gongzuojyKey = !gongzuojyKey"
                >
                    <div class="pic"></div>
                    <div class="tit font14">
                        工作经验<span class="font_red_light">*</span>
                    </div>
                    <div class="describe font13">
                        <span class="selectTxt">{{
                            resume_info.experience_cn
                        }}</span>
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <van-action-sheet
                    v-model="gongzuojyKey"
                    :actions="gongzuojyactions"
                    @select="gongzuojySelect"
                    :duration="0.2"
                />
            </div>
            <div class="split-block"></div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">现居住地</div>
                <div class="describe font13">
                    <input
                        type="text"
                        placeholder="请输入现居住地"
                        value=""
                        v-model="resume_info.residence"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    手机号码<span class="font_red_light">*</span>
                </div>
                <div class="describe font13">
                    <input
                        type="tel"
                        id="fullmobile"
                        placeholder="请输入手机号码"
                        v-model="resume_info.telephone"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">邮箱</div>
                <div class="describe font13">
                    <input
                        name="email"
                        type="text"
                        placeholder="请输入邮箱"
                        v-model="resume_info.email"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="split-block"></div>
            <div class="J_more list_height plist-txt select">
                <div class="pic"></div>
                <div class="tit font14">选填信息</div>
                <div class="describe font13">点开选填信息，填写更加分</div>
                <div class="arrow arrow_bottom"></div>
                <div class="clear"></div>
            </div>
            <div
                class="J_select qs-hidden"
                style="
                    display: block;
                    transform-origin: 0px 0px;
                    opacity: 1;
                    transform: scale(1, 1);
                "
            >
                <div class="list_height plist-txt notarrow">
                    <div class="pic"></div>
                    <div class="tit font14">身高</div>
                    <div class="describe font13">
                        <input
                            id="height"
                            name="height"
                            type="text"
                            placeholder="请输入身高 CM"
                            v-model="resume_info.height"
                        />
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <div class="list_height plist-txt notarrow">
                    <div class="pic"></div>
                    <div class="tit font14">籍贯</div>
                    <div class="describe font13">
                        <input
                            id="householdaddress"
                            name="householdaddress"
                            type="text"
                            placeholder="请输入籍贯"
                            v-model="resume_info.householdaddress"
                        />
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <div class="list_height plist-txt notarrow">
                    <div class="pic"></div>
                    <div class="tit font14">婚姻状况</div>
                    <div class="describe font13">
                        <div class="radio-group x3">
                            <div class="radio-cell">
                                <label for="radio1">未婚</label>
                                <input
                                    id="radio1"
                                    name="marriage"
                                    type="radio"
                                    value="1"
                                    title="未婚"
                                    v-model="resume_info.marriage"
                                />
                            </div>
                            <div class="radio-cell">
                                <label for="radio2">已婚</label>
                                <input
                                    id="radio2"
                                    name="marriage"
                                    type="radio"
                                    value="2"
                                    title="已婚"
                                    v-model="resume_info.marriage"
                                />
                            </div>
                            <div class="radio-cell">
                                <label for="radio3">保密</label>
                                <input
                                    id="radio3"
                                    name="marriage"
                                    type="radio"
                                    value="3"
                                    title="保密"
                                    v-model="resume_info.marriage"
                                />
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <div class="list_height plist-txt notarrow">
                    <div class="pic"></div>
                    <div class="tit font14">QQ</div>
                    <div class="describe font13">
                        <input
                            id="qq"
                            name="qq"
                            type="text"
                            placeholder="请输入QQ号码"
                            value=""
                            v-model="resume_info.qq"
                        />
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <div class="list_height plist-txt notarrow">
                    <div class="pic"></div>
                    <div class="tit font14">微信号</div>
                    <div class="describe font13">
                        <input
                            id="weixin"
                            name="weixin"
                            type="text"
                            placeholder="请输入微信号"
                            value=""
                            v-model="resume_info.weixin"
                        />
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <div class="list_height plist-txt notarrow">
                    <div class="pic"></div>
                    <div class="tit font14">身份证号</div>
                    <div class="describe font13">
                        <input
                            id="idcard"
                            name="idcard"
                            type="text"
                            placeholder="请输入身份证号"
                            value=""
                            v-model="resume_info.idcard"
                        />
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="j_newbutton">
                <div class="j_newbtn" @click="closejibenxinxi()">保存</div>
            </div>
            <div class="zhanwei"></div>

            <van-overlay :show="allImglength" @click="allImglength = false">
                <van-loading color="#fff" size="1.3rem"
                    >图片上传中。。。</van-loading
                >
            </van-overlay>
        </div>
    </div>
</template>

<script>
import { axiosPostnotoken, axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    props: ['guidance', 'resume_info'],
    data() {
        return {
            allImglength: false,
            // 出生年份选择
            birthdayPropsKey: false,

            // 最高学历
            zuigaoxliKey: false,
            zuigaoxliactions: [],

            // 专业相关
            zhuanyeKey: false,
            zhuanyeOptions: [],

            // 工作经历
            gongzuojyKey: false,
            gongzuojyactions: [],
        };
    },
    computed: {},
    mounted() {
        // console.log(this.resume_info);
        // 最高学历数据加工
        let education = [];
        for (let i in this.guidance.education) {
            education.push({
                name: this.guidance.education[i],
                id: i,
            });
        }
        this.zuigaoxliactions = education;
        // 专业数据加工
        let major = [];
        for (let i in this.guidance.major[0]) {
            let smald = [];
            for (let k in this.guidance.major[i]) {
                smald.push({
                    text: this.guidance.major[i][k],
                    value: k,
                });
            }
            major.push({
                text: this.guidance.major[0][i],
                value: i,
                children: smald,
            });
        }
        this.zhuanyeOptions = major;

        // 工作经验数据加工
        let experience = [];
        for (let i in this.guidance.experience) {
            experience.push({
                name: this.guidance.experience[i],
                id: i,
            });
        }
        this.gongzuojyactions = experience;
    },
    methods: {
        closejibenxinxi(type) {
            if (type) {
                this.$emit('closeProps', { type: 0, key: false });
                return;
            }
            // this.$emit('closeProps', { type: 0, key: false });
            if (!this.resume_info.fullname) {
                return Toast({
                    message: '请输入姓名',
                    duration: 2000,
                });
            }

            if (
                this.resume_info.birthdate === 0 ||
                !this.resume_info.birthdate
            ) {
                return Toast({
                    message: '请选择出生年份',
                    duration: 2000,
                });
            }

            if (!this.resume_info.education_cn) {
                return Toast({
                    message: '请选择学历',
                    duration: 2000,
                });
            }

            if (!this.resume_info.experience_cn) {
                return Toast({
                    message: '请选择工作经验',
                    duration: 2000,
                });
            }

            if (!this.resume_info.telephone) {
                return Toast({
                    message: '请输入正确的手机号码',
                    duration: 2000,
                });
            }

            if (
                !/^1[3456789]\d{9}$/.test(
                    this.resume_info.telephone.replace(/\s+/g, '')
                )
            ) {
                return Toast({
                    message: '请输入正确的手机号码',
                    duration: 2000,
                });
            }

            // console.log(JSON.parse(JSON.stringify(this.resume_info)));
            this.resume_info.pid = this.resume_info.id;
            axiosPost('/apis/resume/edit_basic', this.resume_info, (res) => {
                Toast({
                    message: res.msg,
                    duration: 2000,
                });
                if (res.status != 1) {
                    return;
                }
                this.$emit('closeProps', { type: 0, key: true });
            });
        },
        // 工作经历回调
        gongzuojySelect(item) {
            this.gongzuojyKey = false;
            this.resume_info.experience_cn = item.name;
            this.resume_info.experience = item.id;

            // console.log(item);
        },
        // 专业选择回调
        zhuanyeonFinish({ selectedOptions }) {
            this.zhuanyeKey = false;
            this.resume_info.major_cn = selectedOptions[1].text;
            this.resume_info.major = selectedOptions[1].value;
        },
        // 最高学历回调
        zuigaoxliSelect(item) {
            this.zuigaoxliKey = false;
            this.resume_info.education_cn = item.name;
            this.resume_info.education = item.id;
            // console.log(item);
        },
        // 年份选择点击
        birthdayPropsFn(item) {
            this.resume_info.birthdate = item;
            this.birthdayPropsKey = !this.birthdayPropsKey;
        },
        // 图片点击
        changeImgClick() {
            this.$refs.filElem.dispatchEvent(new MouseEvent('click'));
        },
        // 上传头像接口
        handleFiles(e) {
            let files = e.target.files;
            this.readFile(files[0]);
            this.allImglength = true;
        },
        // 读取图片并压缩
        readFile(inputFile) {
            let that = this;
            if (inputFile) {
                if (
                    inputFile.type !== 'image/jpeg' &&
                    inputFile.type !== 'image/png' &&
                    inputFile.type !== 'image/gif'
                ) {
                    return Toast({
                        message: '不是有效的图片文件！',
                        duration: 1000,
                    });
                }

                const reader = new FileReader();
                reader.readAsDataURL(inputFile);
                reader.onload = function () {
                    let img = new Image();
                    img.src = this.result;
                    var width = 750, //图像大小
                        height = 1000, //图像大小
                        quality = 1, //图像质量
                        canvas = document.createElement('canvas'),
                        drawer = canvas.getContext('2d');
                    img.onload = function () {
                        const originHeight = img.height;
                        const originWidth = img.width;
                        let compressedWidth = img.height;
                        let compressedHeight = img.width;
                        if (originWidth > width && originHeight > height) {
                            // 更宽更高，
                            if (originHeight / originWidth > height / width) {
                                // 更加严重的高窄型，确定最大高，压缩宽度
                                compressedHeight = height;
                                compressedWidth =
                                    height * (originWidth / originHeight);
                            } else {
                                //更加严重的矮宽型, 确定最大宽，压缩高度
                                compressedWidth = width;
                                compressedHeight =
                                    width * (originHeight / originWidth);
                            }
                        } else if (
                            originWidth > width &&
                            originHeight <= height
                        ) {
                            // 更宽，但比较矮，以width作为基准
                            compressedWidth = width;
                            compressedHeight =
                                width * (originHeight / originWidth);
                        } else if (
                            originWidth <= width &&
                            originHeight > height
                        ) {
                            // 比较窄，但很高，取maxHight为基准
                            compressedHeight = height;
                            compressedWidth =
                                height * (originWidth / originHeight);
                        } else {
                            // 符合宽高限制，不做压缩
                        }
                        canvas.width = compressedWidth;
                        canvas.height = compressedHeight;
                        drawer.drawImage(
                            img,
                            0,
                            0,
                            canvas.width,
                            canvas.height
                        );
                        that.changeimg(canvas.toDataURL('image/jpg', quality));
                        that.$refs.filElem.value = '';
                    };
                };
            } else {
                return;
            }
        },
        //换取图片
        changeimg(url) {
            axiosPostnotoken(
                '/api/upload/base64',
                {
                    image: url,
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 1000,
                        });
                    }
                    this.resume_info.photo_img = res.data.src;
                    // console.log(res);
                    this.allImglength = false;
                }
            );
        },
    },
};
</script>
<style lang="less" src="../../assets/css/jobCommon.less" scope></style>
<style lang="less" scope>
.birthdayProps {
    padding: 0 0.1rem;

    ul {
        border-left: 0.064rem #eeeeee solid;
        border-top: 0.064rem #eeeeee solid;
        overflow: hidden;
        li {
            height: 1.7067rem;
            width: 3.9253rem;
            line-height: 1.7067rem;
            padding-left: 0.64rem;
            border-bottom: 0.064rem #eeeeee solid;
            border-right: 0.064rem #eeeeee solid;
            text-align: left;
            float: left;
            font-size: 0.64rem;
            color: #666666;
        }
    }
}
.Cascader {
    .s-list {
        padding: 0 0.64rem;
    }
    .qs-btn {
        padding: 0.1rem 0.5rem;
        border: 1px solid #fd8000;
        color: #fd8000;
        margin: 0;
    }
    .s-list-cell {
        display: inline-block;
        position: relative;
        height: 1.28rem;
        line-height: 1.28rem;
        margin-bottom: 0.32rem;
        text-align: center;
        margin-right: 0.4267rem;
        padding: 0 0.32rem;
        padding-right: 1.0667rem;
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: #666;
        border-radius: 0.1707rem;
    }
    .s-list-cell:after {
        content: '\2715';
        position: absolute;
        top: 0;
        right: 0.2133rem;
        font-weight: 100;
    }
    .van-cascader__header {
        height: 2rem;
        padding: 0 0.64rem;
    }

    .van-cascader__tabs .van-tabs__nav--complete {
        padding: 0 0.64rem;
    }

    .van-cascader__tabs.van-tabs--line .van-tabs__wrap {
        height: 1.024rem;
    }

    .van-cascader__title {
        font-size: 0.68267rem;
        color: #969799;
    }
    .van-popup--bottom.van-popup--round {
        border-radius: 0;
    }

    .van-cascader__tabs .van-tab {
        font-size: 0.68267rem;
        padding: 0;
        margin-right: 0.4267rem;
    }

    .van-tabs__line {
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: 1;
        width: 2rem;
        height: 3px;
        background-color: #ee0a24;
        border-radius: 3px;
    }

    .van-cascader__options {
        box-sizing: border-box;
        height: 12rem;
        padding-top: 6px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.64rem;
        margin-top: 0.4267rem;
    }

    .van-cascader__options {
        padding-bottom: 0.5rem;
    }
    .van-cascader__option {
        font-size: 0.4693rem;
        float: none;
        width: 100%;
        text-align: center;
        font-size: 0.68267rem;
        line-height: 1.3rem;
        padding: 0;
    }

    .van-cascader__close-icon {
        color: #c8c9cc;
        font-size: 0.8533rem;
    }
}
</style>
